<!--系统帮助-->
<template>
  <div class="system-help">
    <div class="system-content">
      <div class="system-top">
        <h3>进行档案全生命周期过程的控制和管理</h3>
        <ul class="system-list1">
          <li
            v-for="(item, index) in systemList1"
            :key="index">
            <div class="list-icon">
              <img :src="item.icon" alt="">
            </div>
            <h4>{{ item.title }}</h4>
            <p>{{ item.message1 }}</p>
            <p>{{ item.message2 }}</p>
          </li>
        </ul>
        <img src="@/assets/images/lifecycle.png" alt="" class="lifecycle-img">
        <ul class="system-list2">
          <li
            v-for="(item, index) in systemList2"
            :key="index">
            <div class="list-icon">
              <img :src="item.icon" alt="">
            </div>
            <h4>{{ item.title }}</h4>
            <p>{{ item.message1 }}</p>
            <p>{{ item.message2 }}</p>
          </li>
        </ul>
      </div>
      <div class="system-bottom">
        <h3>档案集中统一管理</h3>
        <ul>
          <li class="list-con">
            <div class="list-radius" style="color: #5B9BD5;border: 3px solid #5B9BD5;">1</div>
            <h4>档案采集</h4>
            <p>档案资料批量导入图像文字OCR识别和智能分类</p>
          </li>
          <li class="list-arrow"></li>
          <li class="list-con">
            <div class="list-radius" style="color: #ED7D31;border: 3px solid #ED7D31;">2</div>
            <h4>档案分类</h4>
            <p>按照企业的档案结构进行档案分类</p>
          </li>
          <li class="list-arrow"></li>
          <li class="list-con">
            <div class="list-radius" style="color: #E5583A;border: 3px solid #E5583A;">3</div>
            <h4>档案编号</h4>
            <p>根据编号规则，归档的档案自动生成编号</p>
          </li>
          <li class="list-arrow"></li>
          <li class="list-con">
            <div class="list-radius" style="color: #F9B439;border: 3px solid #F9B439;">4</div>
            <h4>档案标签</h4>
            <p>自定义标签组，档案分类管理和搜索更方便</p>
          </li>
          <li class="list-con">
            <div class="list-radius" style="color: #7C69A8;border: 3px solid #7C69A8;">5</div>
            <h4>档案属性</h4>
            <p>自定义档案属性，用于档案补充说明，同时可根据这些属性进行档案检索</p>
          </li>
          <li class="list-arrow"></li>
          <li class="list-con">
            <div class="list-radius" style="color: #F9B439;border: 3px solid #F9B439;">6</div>
            <h4>档案状态</h4>
            <p>编写、待审、发布、存档4种内置档案状态</p>
          </li>
          <li class="list-arrow"></li>
          <li class="list-con">
            <div class="list-radius" style="color: #E55B3D;border: 3px solid #E55B3D;">7</div>
            <h4>文件受控</h4>
            <p>设置受控文件夹，查看人只能查看发布状态下的文件</p>
          </li>
          <li class="list-arrow"></li>
          <li class="list-con">
            <div class="list-radius" style="color: #46A4DB;border: 3px solid #46A4DB;">8</div>
            <h4>分配规则</h4>
            <p>子文件夹可继承上级文件夹的规则，执行定制操作</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      systemList1: [
        {
          icon: require('@/assets/images/collect.png'),
          title: '入库',
          message1: '档案采集',
          message2: '精细管理'
        },
        {
          icon: require('@/assets/images/use.png'),
          title: '使用',
          message1: '归档、借阅',
          message2: '鉴定、销毁'
        },
        {
          icon: require('@/assets/images/save.png'),
          title: '安全',
          message1: '全面防护',
          message2: '安全无忧'
        }
      ],
      systemList2: [
        {
          icon: require('@/assets/images/show.png'),
          title: '展现',
          message1: '多种格式',
          message2: '在线查看'
        },
        {
          icon: require('@/assets/images/count.png'),
          title: '统计',
          message1: '报表统计',
          message2: '分析评估'
        }
      ]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.system-help {
  width: 100%;
  min-height: 100%;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  .system-content {
    flex: 1;
    margin: 10px;
    background: #FFF;
    padding: 60px 0;
    .system-top {
      width: 600px;
      height: 420px;
      margin: 0 auto;
      h3 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 30px;
        color: rgb(81,81,81);
      }
      .system-list1 {
        li {
          width: 98px;
          text-align: center;
          float: left;
          margin-left: 130px;
          &:first-child {
            margin-left: 0;
          }
          .list-icon {
            width: 47px;
            height: 47px;
            margin: 0 auto;
            img {
              width: 100%;
              height: 100%;
            }
          }
          h4 {
            font-size: 24px;
            margin-bottom: 15px;
            color: rgb(81,81,81);
          }
          p {
            font-size: 16px;
            color: rgb(81,81,81);
          }
        }
      }
      .lifecycle-img {
        width: 557px;
        height: 40px;
        margin: 0 auto;
        margin-left: 0px;
      }
      .system-list2 {
        width: 326px;
        margin: 0 auto;
        margin-top: 5px;
        li {
          width: 98px;
          text-align: center;
          float: left;
          &:first-child {
            margin-left: -15px;
          }
          &:last-child {
            margin-left: 130px;
          }
          .list-icon {
            width: 47px;
            height: 47px;
            margin: 0 auto;
            img {
              width: 100%;
              height: 100%;
            }
          }
          h4 {
            font-size: 24px;
            margin-bottom: 15px;
            color: rgb(81,81,81);
          }
          p {
            font-size: 16px;
            color: rgb(81,81,81);
          }
        }
      }
    }
    .system-bottom {
      margin: 0 auto;
      width: 852px;
      margin-top: 60px;
      h3 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 30px;
        color: rgb(81,81,81);
      }
      ul {
        .list-con {
          width: 140px;
          float: left;
          .list-radius {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            margin: 0 auto;
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
          }
          h4 {
            font-size: 16px;
            margin-top: 15px;
            margin-bottom: 10px;
            text-align: center;
            font-weight: bold;
            color: rgb(81,81,81);
          }
          p {
            font-size: 12px;
            color: #555555;
            line-height: 20px;
          }
        }
        .list-arrow {
          width: 97px;
          height: 15px;
          background: url(../../assets/images/arrow.png) no-repeat;
          background-size: cover;
          float: left;
          margin-top: 37px;
        }
      }
    }
  }
}
</style>
